@use "@/assets/styles/mixin";
.task-manager {
  @include mixin.flex-column;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 4px 5px 16px 0 rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  .filter-container{
    @include mixin.flex-center(space-between);
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #F6F8FA;
    :deep(.el-form){
      @include mixin.flex-center(flex-start);
      flex-wrap: wrap;
      gap: 20px 54px;
    }
    :deep(.el-form-item){
      margin-bottom: 0;
    }
    :deep(.el-date-editor){
      box-sizing: border-box;
    }
    :deep(.el-input),
    :deep(.el-select),
    :deep(.el-date-editor){
      width: 256px;
    }

    :deep(.el-select__wrapper),
    :deep(.el-input__wrapper),
    :deep(.el-date-editor.el-input__wrapper){
      background-color: #fff !important;
      box-shadow: none !important;
    }

    .time-type{
      :deep(.el-select){
        width: 130px;
        border-right: 1px solid #D8D8D8;
      }
    }
    &-buttons{
      width: 100%;
      text-align: right;
    }
  }
  .table-container{
    @include mixin.flex-column;
    position: relative;
    flex:1;
    overflow: auto;
    &-tabs{
      @include mixin.flex-align;
      width: 100%;
      margin: 20px 0 12px;
      :deep(.el-tabs){
        width: 100%;
      }
      :deep(.el-tabs__item){
        font-size: 14px;
        line-height: 22px;
        color: rgba(0, 0, 0, 0.60);
        &.is-active{
          color: #007DFF !important;
        }
      }
      :deep(.el-tabs__nav-wrap:after){
        background-color: #C2D4E8;
      }
      .filter-radio{
        @include mixin.flex-align;
        flex-wrap: nowrap;
        flex-shrink: 0;
        font-size: 14px;
        color: #3D3D3D;
        line-height: 24px;
        cursor: pointer;
        border-bottom: 2px solid #C2D4E8;
        &-label{
          margin-left: 5px;
          color: rgba(61, 61, 61, 1);
        }
      }
    }
    :deep(.el-empty){
      @include mixin.position-center;
    }
  }
  :deep(.el-table) {
    flex: 1;
    overflow:auto;
    th,td{
      height: 57px;
    }
    .even-row td{
      background-color: #fff !important;
      font-size: 14px;
      color: #606266;
    }

    .odd-row td{
      background-color: #F5F7FA !important;
      font-size: 14px;
      color: #606266;
    }
  }
  :deep(.el-table--border .el-table__cell) {
    border-right: 0;
  }
}

// 状态
.state {
  @include mixin.flex-inline-flex;
  width: 40px;
  height: 24px;
  border-radius: 3px;
  border: 1px solid #ffffff;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  &-danger {
    background-color: #FFC7C7;
    color: #FF3333;
  }
  &-primary {
    background-color: #E0EAFF;
    color: #007DFF;
  }
}



// 调整计划
.plan-time-dialog{
  :deep(.el-dialog){
    @include mixin.flex-column;
    max-height: 80vh;
    overflow-y: hidden;
  }
  :deep(.el-dialog__header){
    margin-bottom: 24px;
  }
  :deep(.el-dialog__body){
    @include mixin.flex-overflow;
  }

  .dialog-footer{
    text-align: center;
  }
}
:deep(.el-input__wrapper),
:deep(.el-select__wrapper),
:deep(.el-textarea__inner),
:deep(.el-input__count){
  background-color: #F2F3F5 !important;
}
.el-input.is-disabled :deep(.el-input__inner){
  font-size: 14px;
  line-height: 22px;
}
.task-tip{
  font-size: 12px;
  color: #86909C;
  line-height: 22px;
}

// 办理
.client-stage-drawer{
  :deep(.el-drawer){
    width: 900px !important;
    border-radius: 20px 0 0 20px;
  }
  :deep(.el-drawer__body){
    @include mixin.flex;
    padding: 0;
  }
  .stage-intention,
  .stage-follow-up{
    width: 50%;
    height: 100%;
    padding: 24px 20px;
    box-sizing: border-box;
  }

  .stage-intention{
    border-right: 1px solid #DCDFE6;
    .opt-instructions{
      @include mixin.flex-align;
      margin: 24px 0 4px;
      font-size: 12px;
      color: #007DFF;
      line-height: 22px;
      cursor: pointer;
      span{
        margin-left: 5px;
      }
    }
    .state-forms{
      position: relative;
      width: 410px;
      height: 65%;
      padding: 20px 10px;
      box-sizing: border-box;
      margin-bottom: 20px;
      overflow-y: auto;
      background-color: #F6F8FA;
      border: 1px solid #DCDFE6;
      :deep(.el-empty){
        @include mixin.position-center;
      }
      :deep(.form-item-el){
        width: 100%;
      }
    }
    .next-task-content{
      height: 20%;
      overflow: scroll;
    }
  }
  .stage-follow-up{
    overflow-y:auto;
    :deep(.el-timeline){
      padding-left: 0;
      margin-top: 24px;
    }
    :deep(.el-timeline-item__node--normal){
      width: 6px;
      height: 6px;
      left: 2px;
    }
    .hide-left-line{
      :deep(.el-timeline-item > .el-timeline-item__tail){
        border-left: none !important;
      }
    }
    .timeline-date{
      @include mixin.flex-align;
      .date{
        font-size: 16px;
        color: rgba(0,0,0,0.6);
        line-height: 24px;
      }
      .time{
        @include mixin.flex-align;
        font-size: 12px;
        color: #86909C;
        line-height: 24px;
        .el-icon{
          margin: 0 4px 0 8px;
        }
      }
    }
    .timeline{
      &-title{
        margin: 4px 0 10px;
        font-size: 16px;
        color: rgba(0,0,0,0.9);
        line-height: 24px;
      }
      &-desc{
        padding: 10px;
        box-sizing: border-box;
        background-color: #f2f3f5;
        border-radius: 4px;
        &-content {
          margin-bottom: 4px;
          font-size: 14px;
          color: #3d3d3d;
          line-height: 24px;
        }
        &-images {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
          grid-gap: 10px;
          margin: 10px 0 20px;
          :deep(.el-image) {
            width: 100%;
            height: 80px;
            border-radius: 4px;
          }
        }
        &-name {
          font-size: 12px;
          color: #86909c;
          line-height: 24px;
        }
      }
    }
    .add-follow-up{
      @include mixin.flex-center();
      flex-direction: column;
      width:100px;
      height: 100px;
      cursor: pointer;
      margin: 8px 8px 8px 0;
      border: 1px solid #cdd0d6;
      background-color: #fafafa;
      :deep(.el-icon) {
        font-size: 28px;
        color: #909399;
      }
      span{
        margin-top: 10px;
        font-size: 12px;
        color: #86909C;
        line-height: 24px;
      }
    }
  }
}
.client-follow-drawer{
  :deep(.el-drawer){
    width: 500px !important;
    border-radius: 20px 0 0 20px;
  }
  :deep(.el-drawer__body){
    padding: 0;
  }
  .stage-follow-up{
    width: 100%;
    height: 100%;
    padding: 24px 20px;
    box-sizing: border-box;
  }
  .stage-follow-up{
    @include mixin.flex-column;
    :deep(.el-timeline){
      @include mixin.flex-overflow;
      padding-left: 0;
      margin-top: 24px;
    }
    :deep(.el-timeline-item__node--normal){
      width: 6px;
      height: 6px;
      left: 2px;
    }
    .hide-left-line{
      :deep(.el-timeline-item > .el-timeline-item__tail){
        border-left: none !important;
      }
    }
    .timeline-date{
      @include mixin.flex-align;
      .date{
        font-size: 16px;
        color: rgba(0,0,0,0.6);
        line-height: 24px;
      }
      .time{
        @include mixin.flex-align;
        font-size: 12px;
        color: #86909C;
        line-height: 24px;
        .el-icon{
          margin: 0 4px 0 8px;
        }
      }
    }
    .timeline{
      &-title{
        margin: 4px 0 10px;
        font-size: 16px;
        color: rgba(0,0,0,0.9);
        line-height: 24px;
      }
      &-desc{
        padding: 10px;
        box-sizing: border-box;
        background-color: #f2f3f5;
        border-radius: 4px;
        &-content {
          margin-bottom: 4px;
          font-size: 14px;
          color: #3d3d3d;
          line-height: 24px;
        }
        &-images {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
          grid-gap: 10px;
          margin: 10px 0 20px;
          :deep(.el-image) {
            width: 100%;
            height: 80px;
            border-radius: 4px;
          }
        }
        &-name {
          font-size: 12px;
          color: #86909c;
          line-height: 24px;
        }
      }
    }

    .add-follow-up{
      @include mixin.flex-center();
      flex-direction: column;
      width:100px;
      height: 100px;
      cursor: pointer;
      margin: 8px 8px 8px 0;
      border: 1px solid #cdd0d6;
      background-color: #fafafa;
      :deep(.el-icon) {
        font-size: 28px;
        color: #909399;
      }
      span{
        margin-top: 10px;
        font-size: 12px;
        color: #86909C;
        line-height: 24px;
      }
    }
  }
}
.follow-up-dialog{
  :deep(.el-dialog){
    @include mixin.flex-column;
    max-height: 80vh;
    overflow-y: hidden;
  }
  :deep(.el-dialog__header){
    margin-bottom: 24px;
  }
  :deep(.el-dialog__body){
    @include mixin.flex-overflow;
  }
  :deep(.el-date-editor){
    width: 100% !important;
  }
  .dialog-footer{
    text-align: center;
  }
}

// 责任人搜索
.content-item-search {
  @include mixin.flex-align;
  :deep(.el-input__wrapper) {
    border: 0;
    box-shadow: none;
    outline: 0;
    background-color: #fff !important;
    &:hover {
      box-shadow: none;
    }
    &.is-focus {
      box-shadow: none;
    }
  }
  :deep(.svg-icon) {
    margin-right: 5px;
    cursor: pointer;
  }
}
.tab-content{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

